<template>
  <div class="main">
    <div class="box">
      <!-- <div v-show="data.UserID == $store.state.userInfo.ID" class="tx">接收定制提醒
                            <van-switch class="right" size="20px" v-model="dztx" />
      </div>-->
      <h2>需求资源列表</h2>
      <div class="card">
        <div class="h">
          <h1></h1>
          <b>{{data.BH}}</b>
          <span>{{data.CDName}} {{data.CType}}</span>
        </div>
        <ul class="cs">
          <li>
            <h5>等级</h5>
            <b>{{data.DengJi}}</b>
          </li>
          <li>
            <h5>长度</h5>
            <b>{{data.ChangDu}}</b>
          </li>
          <li>
            <h5>强力</h5>
            <b>{{data.QiangLi}}</b>
          </li>
          <li>
            <h5>马值</h5>
            <b>{{data.MaZhi1}}{{data.MaZhi2?'-'+data.MaZhi2:''}}</b>
          </li>
          <li>
            <h5>含杂</h5>
            <b>{{fix(data.HanZa)}}</b>
          </li>
          <li>
            <h5>整齐度</h5>
            <b>{{fix(data.ZhengQiDu)}}</b>
          </li>
        </ul>
        <ul class="demand">
          <li>
            <div class="fl pl5">产地</div>
            <div class="fr pr5">{{data.CDName}}</div>
          </li>
          <li>
            <div class="fl pl5">买家</div>
            <div class="fr pr5">{{data.NeedEntName}}</div>
          </li>
          <li>
            <div class="fl pl5">收货地</div>
            <div class="fr pr5">{{data.JHD}}</div>
          </li>
          <li>
            <div class="fl pl5">最晚交货时间</div>
            <div class="fr pr5">{{formatDate(data.LatestDate)}}</div>
          </li>
          <li>
            <div class="fl pl5">联系电话</div>
            <div class="fr pr5">
              <button @click="baojia">我要报价</button>
              <a :href="'tel:'+data.LinkTel">{{data.LinkMan}} {{data.LinkTel}}</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="box">
      <h2>供应商报价列表</h2>
      <ul class="baojia">
        <li v-for="(item,index) in list" :key="index">
          <div>
            <div class="fl pl5">
              <span class="c666">报价号</span>
              {{item.BH}}
            </div>
            <div class="fr pr5">{{item.BJTime.substring(0,10)}}</div>
          </div>
          <ul class="price">
            <li>
              <h5>数量</h5>
              <h4 class="c333">{{item.Num}}{{item.DW}}</h4>
            </li>
            <li>
              <h5>自提价</h5>
              <h4>{{item.ZTPrice}}</h4>
            </li>
            <li>
              <h5>到厂价</h5>
              <h4>{{item.DCPrice}}</h4>
            </li>
            <li>
              <i @click="phonecall(item)" class="iconfont icon-dianhua1"></i>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div style="height:400px;"></div>
    <div class="btns">
      <button @click="baojia">
        <i class="iconfont icon-jiahao"></i> 我要报价
      </button>
    </div>
    <van-popup class="popprice" v-model="showBJ">
      <van-cell-group>
        <van-field v-model="bData.Num" required type="number" label="数量" placeholder="请输入数量"/>
        <div data-v-43745d90 class="van-cell van-cell--required van-hairline van-field">
          <!---->
          <div class="van-cell__title">
            <span>单位</span>
            <!---->
          </div>
          <div class="van-cell__value">
            <div class="van-field__body">
              <div class="fr">
                <van-radio-group class="inline" v-model="bData.DW">
                  <van-radio name="吨">吨</van-radio>
                  <van-radio name="批">批</van-radio>
                  <van-radio name="柜">柜</van-radio>
                </van-radio-group>
              </div>
            </div>
            <!---->
          </div>
          <!---->
        </div>
        <van-field v-model="bData.ZTPrice" required type="number" label="自提价" placeholder="请输入自提价"/>
        <van-field v-model="bData.DCPrice" required type="number" label="到厂价" placeholder="请输入到厂价"/>
      </van-cell-group>
      <div class="btnPrice">
        <van-button type="default" @click="showBJ=false;" size="small">取消</van-button>
        <van-button type="primary" @click="confirm" class="ml1em" size="small">确认</van-button>
      </div>
    </van-popup>
    <share :batch-no="batchNo" v-show="$store.state.userInfo.ID == data.UserID" :show="false"></share>
  </div>
</template>

<script>
import api from "@/api/api";
import share from "@/components/share";
import { Toast } from "vant";
export default {
  components: {
    share
  },
  data() {
    return {
      dztx: false,
      batchNo: "0", //0隐藏
      showBJ: false,
      BType: ["新疆棉", "地产棉", "进口棉 人民币交易", "进口棉 美金交易"],
      NeedYear: ["", "新棉", "拍储棉"],
      data: {
        BType: 0
      },
      bData: {
        DW: "吨"
      },
      list: []
    };
  },
  methods: {
    share() {
      var desc = "聚棉网为您推荐以下资源";
      var link =
        "https://www.icottontrade.com/%23/baojia/" + this.$route.params.id;
      var url =
        "https://www.icottontrade.com/cot/redirect/baojia?id=" + this.$route.params.id;
        console.log(url)
      wx.onMenuShareAppMessage({
        title: this.$store.state.userInfo.NickName + "为您推荐",
        desc: desc,
        link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: "https://www.icottontrade.com/cot/upload/logo.jpg", // 自定义图标
        type: "link", // 分享类型,music、video或link，不填默认为link
        dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
        success: function() {
          // 用户确认分享后执行的回调函数
          Toast({
            message: "分享成功",
            duration: 1500
          });
        },
        cancel: function() {
          // 用户取消分享后执行的回调函数
        }
      });
      wx.onMenuShareTimeline({
        title: this.$store.state.userInfo.EntName,
        link: window.location.href,
        imgUrl: "https://www.icottontrade.com/cot/upload/logo.jpg" // 自定义图标
      });
    },
    baojia() {
      if (!this.$store.state.userInfo.phoneno) {
        Toast.fail("请先注册！");
        return;
      }
      this.showBJ = true;
    },
    formatDate(str) {
      if (str) {
        return str.substring(0, 10);
      }
    },
    fix(s) {
      if (s) {
        return s;
      } else {
        return "-";
      }
    },
    confirm() {
      if (!this.bData.Num || (!this.bData.ZTPrice && !this.bData.DCPrice)) {
        Toast.fail("请完整填写报价信息！");
        return;
      }
      this.bData.UserID = this.$store.state.userInfo.ID;
      this.bData.UserName = this.$store.state.userInfo.XM;
      this.bData.LinkTel = this.$store.state.userInfo.phoneno;
      this.bData.SupplyID = this.$route.params.id;
      api.AddBaoJia(this.bData).then(res => {
        Toast.success(res.msg);
        setTimeout(() => {
          this.showBJ = false;
          this.getBaoJiaList();
        }, 1000);
      });
    },
    getBaoJiaList() {
      this.batchNo = this.$route.params.id;
      api
        .getBaoJiaList({
          SupplyID: this.$route.params.id
        })
        .then(res => {
          res.forEach(n => {
            if (
              !this.data.ShowBJ &&
              this.data.UserID != this.$store.state.userInfo.ID
            ) {
              n.ZTPrice = "需方隐藏";
              n.DCPrice = "需方隐藏";
            }
          });
          this.list = res;
        });
    },
    phonecall(item) {
      if (this.data.UserID != this.$store.state.userInfo.ID) {
        Toast.fail("电话只能发布人查看");
        return;
      }
      window.location.href = "tel://" + item.LinkTel;
      let params = {
        EntID: this.$store.state.userInfo.EntID,
        EntName: this.$store.state.userInfo.EntName,
        UserName: this.$store.state.userInfo.XM
          ? this.$store.state.userInfo.XM
          : this.$store.state.userInfo.NickName,
        UserID: this.$store.state.userInfo.ID,
        OpenID: this.$store.state.userInfo.OpenID,
        UserTel: this.$store.state.userInfo.phoneno,
        cFactorybatchno: this.data.BH,
        LinkMan: item.UserName,
        LinkTel: item.LinkTel
      };
      api
        .getUserInfoByID({
          userID: item.UserID
        })
        .then(re => {
          re = JSON.parse(re.data);
          params["LinkEntName"] = re.EntName;
          params["LinkEntID"] = re.EntID;
          return params;
        })
        .then(v => {
          api.addPhoneLog(params);
        });
    }
  },
  created() {
    api
      .getSupplyDetail({
        SupplyID: this.$route.params.id
      })
      .then(res => {
        if (res) {
          this.data = res;
          this.getBaoJiaList();
        } else {
          Toast.fail("此需求已过期或被删除！");
        }
      });
    var that = this;
    setTimeout(() => {
      that.share();
    }, 1000);
  }
};
</script>

<style scoped lang='less'>
.main {
  .btns {
    position: fixed;
    bottom: 50px;
    width: 100%;
    text-align: center;
    button {
      background: rgba(255, 122, 0, 0.5);
      color: #fff;
      padding: 0.6em 1.5em;
      border: 0;
      border-radius: 5px;
    }
  }
  .btnPrice {
    margin: 1em;
  }
  .popprice {
    width: 80%;
    .ml1em {
      margin-left: 1em;
    }
    .inline {
      .van-radio {
        display: inline-block;
      }
    }
  }
  .baojia {
    font-size: 14px;
    color: #000;
    > li {
      min-width: 2.5em;
      border-bottom: 1px solid #f2f2f2;
      padding: 5px;
    }
    .price {
      clear: both;
      display: flex;
      > li {
        flex: 1;
        border-right: 1px solid #f2f2f2;
        h5 {
          padding: 5px;
        }
        h4 {
          color: red;
          margin-bottom: 10px;
          font-size: 16px;
          margin-top: 5px;
          font-weight: normal;
        }
        i {
          color: #999;
          display: inline-block;
          border: 1px solid #999;
          border-radius: 50%;
          text-align: center;
          font-size: 20px;
          line-height: 20px;
          width: 1em;
          height: 1em;
          margin-top: 25px;
          padding: 2px;
        }
      }
    }
  }
  .box {
    background: #fff;
    border-radius: 5px;
    margin: 5px 0 10px 0;
    overflow: hidden;
    border: 1px solid #ccc;
    > h2 {
      padding: 10px;
      border-bottom: 1px solid #f2f2f2;
    }
  }
  .tx {
    background: #fff;
    text-align: left;
    padding: 0 10px;
    .right {
      position: relative;
      top: 5px;
    }
  }
  h2 {
    background: #fff;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
}
.card {
  background: #fff;
  margin: 0 0 0 0;
  padding: 5px 10px 0 10px;
  text-align: left;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  .demand {
    font-size: 12px;
    li {
      height: 2.5em;
      line-height: 2.5em;
      border-bottom: 1px solid #f2f2f2;
      button {
        background: #2dbaba;
        color: #fff;
        height: 2em;
        line-height: 2em;
        border-radius: 5px;
        outline: 0;
        border: 0;
        margin-right: 1em;
        padding: 0 1em;
      }
    }
  }
  .h {
    padding-left: 10px;
  }
  > div {
    position: relative;
    h1 {
      position: absolute;
      top: 3px;
      left: 0;
      width: 4px;
      height: 1em;
      font-size: 16px;
      background: #2dbaba;
      padding: 0;
      margin: 0;
    }
  }
  .cs {
    margin-top: 10px;
    color: #333;
    display: flex;
    width: 100%;
    font-size: 16px;
    li {
      flex: 1;
      border: 1px solid #f2f2f2;
      text-align: center;
      border-right: 0;
    }
    li:last-child {
      border-right: 1px solid #f2f2f2;
    }
    h5 {
      color: #333;
      height: 2em;
      line-height: 2em;
    }
    b {
      font-weight: normal;
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style>